import React, { useState } from 'react';
import { 
  Input, 
  Button, 
  Card,
  Row,
  Col,
  Space,
  Upload,
  message
} from 'antd';
import { 
  PlusOutlined,
  UploadOutlined
} from '@ant-design/icons';

// 推广位数据类型
interface PromotionSlotType {
  id: string;
  label: string;
  url: string;
  images: string[];
}

const Promotion: React.FC = () => {
  const [promotionSlots, setPromotionSlots] = useState<PromotionSlotType[]>([
    {
      id: '1',
      label: '世界',
      url: 'https://baidu.com',
      images: []
    },
    {
      id: '2',
      label: '联结',
      url: 'https://baidu.com',
      images: []
    },
    {
      id: '3',
      label: '生命',
      url: 'https://baidu.com',
      images: []
    },
    {
      id: '4',
      label: '价值',
      url: 'https://baidu.com',
      images: []
    }
  ]);

  // 处理URL输入变化
  const handleUrlChange = (id: string, url: string) => {
    setPromotionSlots(prev => 
      prev.map(slot => 
        slot.id === id ? { ...slot, url } : slot
      )
    );
  };

  // 处理添加新的推广位
  const handleAddSlot = (id: string) => {
    const currentSlot = promotionSlots.find(slot => slot.id === id);
    if (currentSlot && currentSlot.images.length < 6) {
      setPromotionSlots(prev => 
        prev.map(slot => 
          slot.id === id ? { ...slot, images: [...slot.images, ''] } : slot
        )
      );
    } else {
      message.warning('单模块支持最多添加6张图片/视频');
    }
  };

  // 处理保存
  const handleSave = () => {
    message.success('保存成功');
    console.log('保存数据:', promotionSlots);
  };

  // 处理取消
  const handleCancel = () => {
    message.info('已取消');
  };

  // 上传配置
  const uploadProps = {
    name: 'file',
    action: '/api/upload',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info: any) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <Card style={{ borderRadius: '8px' }}>
        {/* 顶部标题和按钮区域 */}
        <Row justify="space-between" align="middle" style={{ marginBottom: '24px' }}>
          <Col>
            <Space direction="vertical" size={4}>
              <span style={{ fontSize: '18px', fontWeight: 'bold', color: '#000' }}>
                公共推广位配置
              </span>
              <span style={{ fontSize: '14px', color: '#666' }}>
                单模块支持最多添加6张图片/视频
              </span>
            </Space>
          </Col>
          <Col>
            <Space>
              <Button
                type="primary"
                onClick={handleSave}
                style={{ 
                  backgroundColor: '#1890ff',
                  borderColor: '#1890ff',
                  borderRadius: '6px'
                }}
              >
                保存
              </Button>
              <Button
                onClick={handleCancel}
                style={{ 
                  backgroundColor: '#f5f5f5',
                  borderColor: '#d9d9d9',
                  color: '#666',
                  borderRadius: '6px'
                }}
              >
                取消
              </Button>
            </Space>
          </Col>
        </Row>

        {/* 推广位配置区域 */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
          {promotionSlots.map((slot) => (
            <div
              key={slot.id}
              style={{
                border: '1px solid #f0f0f0',
                borderRadius: '8px',
                padding: '16px',
                backgroundColor: '#fff'
              }}
            >
              <Row align="middle" gutter={16}>
                <Col span={4}>
                  <span style={{ fontSize: '16px', fontWeight: '500', color: '#333' }}>
                    {slot.label}
                  </span>
                </Col>
                <Col span={16}>
                  <Space>
                    <Upload {...uploadProps}>
                      <Button
                        icon={<UploadOutlined />}
                        style={{
                          border: '1px solid #d9d9d9',
                          borderRadius: '4px',
                          color: '#666'
                        }}
                      />
                    </Upload>
                    <Input
                      value={slot.url}
                      onChange={(e) => handleUrlChange(slot.id, e.target.value)}
                      placeholder="请输入URL"
                      style={{ flex: 1 }}
                    />
                  </Space>
                </Col>
                <Col span={4}>
                  <Button
                    type="text"
                    icon={<PlusOutlined />}
                    onClick={() => handleAddSlot(slot.id)}
                    style={{
                      fontSize: '20px',
                      color: '#000',
                      border: 'none',
                      padding: '0',
                      height: 'auto'
                    }}
                  />
                </Col>
              </Row>
              
              {/* 已上传的图片/视频显示区域 */}
              {slot.images.length > 0 && (
                <div style={{ marginTop: '12px', paddingTop: '12px', borderTop: '1px solid #f0f0f0' }}>
                  <Row gutter={8}>
                    {slot.images.map((_image, index) => (
                      <Col key={index} span={4}>
                        <div
                          style={{
                            width: '100%',
                            height: '80px',
                            border: '1px dashed #d9d9d9',
                            borderRadius: '4px',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            backgroundColor: '#fafafa'
                          }}
                        >
                          <span style={{ color: '#999', fontSize: '12px' }}>
                            图片 {index + 1}
                          </span>
                        </div>
                      </Col>
                    ))}
                  </Row>
                </div>
              )}
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
};

export default Promotion; 